<template>
  <div id="riskwarning">
    <div class="header">
      <span class="bigleft">风险预警</span>
    </div>
    <div class="leftright">
      <div class="echarts" style="grid-template-columns: calc((100% - 40px) / 2) calc((100% - 40px) / 4) calc((100% - 40px) / 4)">
        <div style="border: 1px solid #eee;overflow: hidden;">
          <div>
            <div style="width:50%;height:90px;float:left;">
              <p style="margin-left:16px;margin-top:6px"><span style="font-size:36px;color:#1f92ef">{{risk_sum['sum']}}</span></p>
              <P style="margin-left:16px;margin-top:-4px"><span style="font-size:12px;color:#5c6781;font-weight: bold">风险预警总数</span></P>
            </div>
            <div style="width:50%;height:90px;float:right;">
              <div style="padding-top: 30px;padding-right:20px;float:right">
                <div class="lls-chart-hint-item">
                  <span class="lls-chart-hint-icon-total"></span>
                  <span class="lls-chart-hint-text">风险预警总数</span>
                </div>
                <div class="lls-chart-hint-item">
                  <span class="lls-chart-hint-icon-validated"></span>
                  <span class="lls-chart-hint-text">已下发预警数</span>
                </div>
              </div>
            </div>
          </div>
          <div id="warningbigpolang" style="height:59px;">
          </div>
        </div>
        <div id="warningtypemap" style="border: 1px solid #eee">
        </div>
        <div id="watningtypemapone" style="border: 1px solid #eee"></div>
      </div>

      <div class="risktable">
        <div style="border-bottom:1px solid #eee">
          <span class="bigleft">风险预警列表</span>
        </div>

        <div class="leftright">
          <div style="margin-top:10px">
            <div style="float:right;margin-right: 20px">
              <at-search v-model="search" placeholder="请输入事项名称" type="text" project='mh' icon="search" @keyup.enter.native="riakwarningsearch" :on-icon-click="riakwarningsearch"/>
            </div>
          </div>
          <at-table :data="tableData.tableData" 
            @filter-change="WaningFiltersChange"
            @cell-click="RowClick"
            @sort-change = "WarinSortChange">
            <at-table-column prop="arisk_event_name" label="风险事项名称" min-width="215px" :show-overflow-tooltip="true">
            </at-table-column>
            <at-table-column prop="arisk_event_type" column-key="arisk_event_type" min-width="100px" label="事项类型" :filters="[
                { text: '新兴', value: '新兴'},
                { text: '高危', value: '高危'},
                { text: '流行', value: '流行'},
                { text: '攻击类', value: '攻击类'}
              ]"  filter-placement="bottom-start">
            </at-table-column>
            <at-table-column prop="arisk_event_level"  column-key="arisk_event_level"  min-width="90px" label="事项等级" :filters="[
                { text: '一般', value: 1 },
                { text: '较大', value: 2 },
                { text: '重大', value: 3 },
                { text: '特大', value: 4 }
              ]"  filter-placement="bottom-start">
              <template slot-scope="scope">
                <span v-if="scope.row.arisk_event_level == 1">一般</span>
                <span v-if="scope.row.arisk_event_level == 2">较大</span>
                <span v-if="scope.row.arisk_event_level == 3">重大</span>
                <span v-if="scope.row.arisk_event_level == 4">特大</span>
              </template>
            </at-table-column>
            <at-table-column prop="ainfluence" label="影响范围">
            </at-table-column>
            <at-table-column prop="asubmit_time" label="预警提交时间" sortable="custom">
            </at-table-column>
            <at-table-column prop="aearly_warn" label="预警状态" column-key="aearly_warn" min-width="100px" :filters="[
                { text: '未下发', value: 0 },
                { text: '已下发', value: 1 }
              ]"  filter-placement="bottom-start">
               <template slot-scope="scope">
                <span v-if="scope.row.aearly_warn == 1">已下发</span>
                <span v-if="scope.row.aearly_warn == 0">未下发</span>
              </template>
            </at-table-column>
          </at-table>
          <div style="text-align:center; padding-top: 20px;padding-bottom:20px">
            <Pagination 
              :currentPage="riskwarningSubmit.pagination.current" 
              :total="tableData.total"
              :pageSizes="[20, 40, 80, 100]" 
              :pageSize="riskwarningSubmit.pagination.pageSize" 
              layout='total, sizes, prev, pager, next, jumper'
              @size-change="handleSizeChange" 
              @current-change="handleCurrentChange">
            </Pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'

export default {
  name: 'riskwarning',
  data () {
    return {
      search: '',
      filterText: '',
      warned: 0,
      showrisklussedform: false,
      showcheckunit: false,
      belongcount: 0,
      form: {
        warnflag: false,
        warnunit: [],
        id: 0
      },
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      error: false,
      rules: {
        warnflag: [
          { required: true, message: '请选择预警范围', trigger: 'change' }
        ]
      },
      dialogVisible: false
    }
  },
  computed: {
    ...mapState({
      tableData: state => state.riskwarning.riskData,
      nodesinfo: state => state.riskwarning.nodesinfo,
      // allunitnames: state => state.riskwarning.allunitnames,
      changeSizeValue: state => state.system.changeSizeValue,
      risk_sum: state => state.riskwarning.risk_sum,
      riskwarningSubmit: state => state.riskwarning.riskwarningSubmit
    })
  },
  watch: {
    $route (to, from) {
      if (to.name === '@风险预警') {
        this.$store.dispatch('riskwarning/riskData')
      }
    },
    filterText (val) {
      this.$refs.tree.filter(val)
    },
    changeSizeValue () {
      if (document.getElementById('warningbigpolang')) {
        this.$echarts.init(document.getElementById('warningbigpolang')).resize()
      }
      if (document.getElementById('warningtypemap')) {
        this.$echarts.init(document.getElementById('warningtypemap')).resize()
      }
      if (document.getElementById('watningtypemapone')) {
        this.$echarts.init(document.getElementById('watningtypemapone')).resize()
      }
    }
  },
  created () {
    this.$store.dispatch('riskwarning/riskData')
  },
  destroyed () {
    this.$store.commit('riskwarning/clear')
  },
  methods: {
    // 搜索事件
    riakwarningsearch () {
      this.$store.dispatch('riskwarning/changeSearchValue', {
        'search': this.search,
        'type': 'search'
      })
    },
    WaningFiltersChange (filters) {
      this.$store.dispatch('riskwarning/filters', filters)
    },
    // 排序
    WarinSortChange ({ column, prop, order }) {
      if (order !== null) {
      } else {
        prop = 'asubmit_time'
        order = 'ascending'
      }
      this.$store.dispatch('riskwarning/sotr', {
        key: prop,
        value: order.slice(0, -3)
      })
    },
    // 给后台每页显示多少值
    handleSizeChange (size) {
      this.$store.dispatch('riskwarning/paginationChange', {
        'size': size
      })
    },
    // 点击跳转列表跳转相应页面事件，判断如果是否前面的选择框
    RowClick (row) {
      this.$router.push({ 'path': 'warning/details',
        'query': {
          eventid: row['arisk_event_id'],
          aanalysisid: row['aanalysis_id'],
          type: 'warning'
        }
      })
    },
    // 给后台显示的页数
    handleCurrentChange (current) {
      this.$store.dispatch('riskwarning/paginationChange', {
        'current': current
      })
    }
  }
}
</script>
<style lang="less" scoped>
#riskwarning{
  background-color: #fff;
  padding-bottom: 20px;
  p{
    margin: 0px;
    padding: 0px
  }
  .lls-chart-hint-item{
    width: 100%;
    height: 12px;
    line-height: 12px;
    margin-bottom: 6px;
  }
  .lls-chart-hint-icon-total{
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 1px solid #1f92ef;
    background-color: #e8f4fd;
    border-radius: 50%;
  }
  .lls-chart-hint-text{
    display: inline-block;
  }
  .lls-chart-hint-icon-validated{
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 1px solid #1f92ef;
    background-color: #1f92ef;
    border-radius: 50%;
  }
  .radio_group+div{
    margin-top: -7px
  }
  .leftright{
    margin-left:20px;
    margin-right:20px;
  }
  .button{
    display: inline-block;
    width: 35px;
    text-align: center
  }
  .risktable{
    border: 1px solid #eee;
    margin-top: 20px;
  }
  .echarts{
    margin-top: 20px;
    height: 150px;
    display: grid;
    grid-template-rows: 150px;
    grid-gap: 20px;
  }
  .header{
    height: 50px;
    border-bottom: 1px solid #eee;
  }
  .bigleft{
    line-height: 50px;
    display: inline-block;
    margin-left: 20px;
    font-size: 14px;
    color: #5c6781;
    font-weight: bold;
  }
}
</style>

